<template>
  <view class="accountList_outer">
    <beginOuterBox>
      <view slot="begintopImg" >
        <image class="begin_title_img" src="@/static/begin/begintop.png" ></image>
      </view>
      <!-- <view slot="hellow">关联帐户二次确认完成核对</view>
      <view slot="titleText">请确认手机号一致的子APP关联帐户</view> -->
      <!-- 开始页 -->
      <view class="accountList_content_btnbox" slot="content">
        <view class="accountList_title">关联帐户二次确认完成核对</view>
        <view class="accountList_title_last">请确认手机号一致的子APP关联帐户</view>
        <view class="user_list">
          <view class="user_list_item" v-for="item in accountListData" :key="item.id">
            <view class="user_list_item_left">
              <!-- <image
                src="https://cdn.uviewui.com/uview/swiper/swiper1.png"
              ></image> -->
              <u-avatar :src="item.avatar" shape="square" size="196rpx"></u-avatar>
            </view>
            <view class="user_list_item_right">
              <view class="user_list_item_right_top">
                <text v-if="item.subProjectId == 1">云游账户：</text>
                <text v-if="item.subProjectId == 2">闪电纪元账户：</text>
              </view>
              <view class="user_list_item_right_center"><text>{{ item.nickname }}</text></view>
              <view class="user_list_item_right_down"><text>ID：{{ item.userId }}</text></view>
            </view>
            <view class="user_list_item_img">
              <image src="@/static/reward/crook.png"></image>
            </view>
          </view>
          <!-- 没有云游账户 -->
          <view class="user_list_item_null" v-if="accountListData &&
            !accountListData.find((item) => item.subProjectId == 1)
            ">
            <view class="user_list_item_null_left">
              <view class="user_list_item_null_left_img">
                <image src="@/static/accountList/Rubik.png"></image>
              </view>
              <view class="user_list_item_null_left_text"><text>云游账户：</text></view>
            </view>
            <view class="user_list_item_null_right">
              <view class="user_list_item_null_right_text"><text>暂未注册</text></view>
              <view class="user_list_item_null_right_img">
                <image src="@/static/accountList/grayHook.png"></image>
              </view>
            </view>
          </view>
          <!-- 没有纪元账户 -->
          <view style="margin-top: 40rpx" class="user_list_item_null" v-if="accountListData &&
            !accountListData.find((item) => item.subProjectId == 2)
            ">
            <view class="user_list_item_null_left">
              <view class="user_list_item_null_left_img">
                <image src="@/static/accountList/Rubik.png"></image>
              </view>
              <view class="user_list_item_null_left_text"><text>闪电纪元账户：</text></view>
            </view>
            <view class="user_list_item_null_right">
              <view class="user_list_item_null_right_text"><text>暂未注册</text></view>
              <view class="user_list_item_null_right_img">
                <image src="@/static/accountList/grayHook.png"></image>
              </view>
            </view>
          </view>
        </view>
        <view class="accountList_affirm">
          <view class="accountList_affirm_btn" @click="getAccountBind"><text>同步账户</text></view>
        </view>
      </view>
    </beginOuterBox>
  </view>
</template>

<script>
import beginOuterBox from "@/components/beginOuterBox.vue";
import { reqUserAccountList } from "@/api/my.js";
import { mapMutations } from "vuex";
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  onLoad() {
    this.getUserAccountList()
  },
  methods: {
    ...mapMutations(['setAccountListData']),
    // 绑定账号
    async getAccountBind() {
      uni.switchTab({
        url: "/pages/home/index",
      });
    },
    // 请求用户账号信息
    async getUserAccountList() {
      const result = await reqUserAccountList();
      if (result.code == 200) {
        this.setAccountListData(result.data ? result.data : []);
      } else {
        uni.showToast({
          title: "账户列表请求失败",
          icon: "error",
        });
      }
    },
  },
  computed: {
    ...mapState(["accountListData"]),
  },
  components: {
    beginOuterBox,
  },
};
</script>

<style lang="scss" scoped>
.accountList_outer {
  width: 100vw;
  min-height: 100vh;
  .begin_title_img {
      width: 126rpx;
      height: 126rpx;
      position: absolute;
      top: 62rpx;
      left: 58rpx;
    }
  .accountList_content_btnbox {
    margin-top: -20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    .accountList_title {
      position: fixed;
      top: 260rpx;
      left: 50rpx;
      font-size: 50rpx;
      font-family: Alibaba PuHuiTi;
      font-weight: 800;
      color: #FFFAEF;
    }

    .accountList_title_last {
      font-size: 30rpx;
      font-family: Dream Han Sans SC;
      font-weight: normal;
      color: #FFFAEF;
      position: fixed;
      top: 340rpx;
      left: 50rpx;
    }

    .user_list {
      width: 695rpx;
      height: 519rpx;
      background: #fffaef;
      border-radius: 38rpx;
      overflow: auto;

      .user_list_item {
        height: 263rpx;
        width: 100%;
        display: flex;
        align-items: center;
        position: relative;
        background: #f5f0e5;
        margin-bottom: 24rpx;
        border-radius: 38rpx;

        .user_list_item_left {
          width: 196rpx;
          height: 196rpx;
          border-radius: 26rpx;
          overflow: hidden;
          margin-left: 36rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .user_list_item_right {
          margin-left: 32rpx;

          .user_list_item_right_top {
            text {
              font-size: 29rpx;
              font-family: DreamHanSansSC;
              font-weight: normal;
              color: #ff7e17;
            }
          }

          .user_list_item_right_center {
            text {
              width: 181rpx;
              height: 36rpx;
              font-size: 47rpx;
              font-family: DreamHanSansSC;
              font-weight: 800;
              color: #302b27;
            }
          }

          .user_list_item_right_down {
            text {
              font-size: 22rpx;
              font-family: DreamHanSansSC;
              font-weight: normal;
              color: #302b27;
              opacity: 0.5;
            }
          }
        }

        .user_list_item_img {
          position: absolute;
          width: 38rpx;
          height: 38rpx;
          top: 26rpx;
          right: 26rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }
      }

      .user_list_item_null {
        width: 695rpx;
        height: 128rpx;
        background: #f5f0e5;
        border-radius: 38rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .user_list_item_null_left {
          display: flex;
          align-items: center;

          .user_list_item_null_left_img {
            width: 46rpx;
            height: 56rpx;
            margin-left: 42rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }

          .user_list_item_null_left_text {
            font-size: 29rpx;
            font-family: DreamHanSansSC;
            font-weight: normal;
            color: #ff7e17;
            margin-left: 20rpx;
          }
        }

        .user_list_item_null_right {
          display: flex;
          align-items: center;

          .user_list_item_null_right_img {
            width: 42rpx;
            height: 42rpx;
            margin-right: 32rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }

          .user_list_item_null_right_text {
            font-size: 22rpx;
            font-family: DreamHanSansSC;
            font-weight: normal;
            color: #a6a199;
            margin-right: 26rpx;
          }
        }
      }
    }

    .accountList_affirm {
      display: flex;
      justify-content: center;
      margin-top: 90rpx;
      z-index: 200;

      .accountList_affirm_btn {
        width: 545rpx;
        height: 108rpx;
        background: linear-gradient(180deg, #ff7007 0%, #ffa749 100%);
        border-radius: 38rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        text {
          font-size: 38rpx;
          font-family: DreamHanSansSC;
          font-weight: 600;
          color: #ffffff;
        }
      }
    }
  }
}
</style>
